<style>
.contract-modal {
  width: 800px;
  margin: 0 auto;
  display: block;
}
.contract-modal .contract-detail {
  margin: 0 auto 0;
  /* padding: 20px; */
  height: auto;
  /* border: 1px solid; */
}
.contract-btns {
  height: 50px;
  background-color: #fff;
  text-align: center;
  padding-bottom: 44px;
  padding-top: 10px;
}
#mycanvas {
  min-height: 50vh;
  background: #fff;
  position: relative;
  box-shadow: 1px 1px 15px -1px #dadada;
}
canvas {
  margin: 0 auto;
  display: block;
  border-bottom: 2px solid #aaa;
}
</style>

<template>
  <div v-if='visible'>
    <div class="contract-modal">

      <div class="contract-detail" id="contractDetail">
        <div id="mycanvas" ref="mycanvas" >
          <!--  -->
          <vue-drag-resize @resizing="resizing" :preventActiveBehavior="item.options.active" :style="{fontSize:item.data.fontSize+'px',lineHeight:item.data.height+'px',maxHeight:item.options.maxH+'px'}"
            @dragstop="dragstop(item)" @dragging="dragging($event,item)" @clicked="clicked($event,item)" @activated="activated(item)" :x="item.options.x" :y="item.options.y" :z="item.options.z" :minw="item.options.minw"
            :minh="item.options.minh" :parentLimitation="true" class="item-ipt" :w="item.data.width" :h="item.data.height" style="background:rgb(243 249 253)" v-for="(item,index1) in datas" :key="item.keys">
            {{item.label}}{{item.keys}}
          </vue-drag-resize>
          <!--  -->
        </div>
      </div>
    </div>
    <el-drawer size="100%" :modal-append-to-body="false" :modal="false" title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <el-form style="padding:0 20px;" label-position="top" :model="sel" ref="ruleForm" label-width="80px">
        <el-form-item label="内容" prop="name">
          <el-input v-model="sel.label"></el-input>
        </el-form-item>
        <el-form-item label="字体" prop="region">
          <el-select v-model="sel.data.fontFamily" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字号" prop="region">
          <el-select v-model="sel.data.fontSize" placeholder="请选择字号">
            <el-option :label="item.label" :value="item.value" v-for="(item,index) in fontSizes" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top:30px">
          <el-button @click="fnDelete()" type="danger">删除</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import pdf from "../../static/pdf/build/pdf";
import VueDragResize from "vue-drag-resize";

const fontSizes = [
  { label: "一号", value: 34.7 },
  { label: "小一", value: 32 },
  { label: "二号", value: 29.3 },
  { label: "小二", value: 24 },
  { label: "三号", value: 21.3 },
  { label: "小三", value: 20 },
  { label: "四号", value: 18.7 },
  { label: "小四", value: 16 },
  { label: "五号", value: 14 },
  { label: "小五", value: 12 },
];

export default {
  name: "md-contract",
  components: {
    VueDragResize,
  },
  props: {
    visible: Boolean,
    showBtns: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dragStatus: true,
      fontSizes,
      ruleForm: {
        name: "",
      },
      drawer: false,
      direction: "rtl",
      sel: { data: {} },
      datas: [], //添加的模块数据
      pdfPages: 0,
      pdfW: 0,
      pdfH: 0,
      hisSel: null,
      move_l: 0,
      move_b: 0,
      pdf_moving: false, //移动
      isDel: false,
      copyItem: null,
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.contractError = false;
        this.$nextTick(() => {
          this.getPdf();
        });
      }
    },
  },
  methods: {
  
    // 缩放事件
    resizing(e) {
      this.sel.data.width = e.width;
      this.sel.data.height = e.height;
    },
    // 关闭抽屉弹窗
    handleClose(done) {
      done();
    },
    fnDelete() {
      if (this.sel) {
        let _this = this;
        let newData = JSON.parse(JSON.stringify(_this.datas));
        // _this.datas = [];
        // _this.drawer = false;
        // setTimeout(() => {
          _this.datas = newData.filter(function (item) {
            return item.keys !== _this.sel.keys;
          });
        // }, 100);
      }
    },
    // 拖拽结束
    dragstop(item) {
      item.options.z = 99;
    },
    // 拖拽时
    dragging(e, item) {
      console.log(e);
      if (e.top > this.pdfH) {
        item.data.page = parseInt(e.top / this.pdfH);
        item.data.y = parseInt(e.top - item.data.page * this.pdfH);
      } else {
        item.data.y = e.top;
        item.data.page = 0;
      }
      item.data.x = e.left;
      item.options.x = e.left;
      item.options.y = e.top;
      item.options.z = 100;
    },
    // 点击组件
    clicked(e, item) {
      console.log("aaaaaaaaa",e);
      this.datas.map((item) => {
        item.options.active = true;
      });

      item.options.active = false;
      this.sel = item;
      this.drawer = true;
      this.$forceUpdate();
    },
    // 点击组件外
    activated(item) {
      // item.options.active = false;
      console.log("ffffffffff");
      // if (this.sel) {
      //   this.drawer = false;
      // }
    },
    // 父组件调用
    setDatas(data) {
      this.datas.push(data);
      this.$forceUpdate();
    },

    getPage(pdf, pageNumber, container, numPages) {
      //获取pdf
      let _this = this;
      pdf.getPage(pageNumber).then((page) => {
        let scale = container.offsetWidth / page.view[2];
        let viewport = page.getViewport(scale);
        let canvas = document.createElement("canvas");
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        _this.pdfW = viewport.width;
        _this.pdfH = viewport.height;

        container.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        var renderContext = {
          canvasContext: ctx,
          transform: [1, 0, 0, 1, 0, 0],
          viewport: viewport,
          intent: "print",
        };
        page.render(renderContext).then(() => {
          pageNumber += 1;
          if (pageNumber <= numPages) {
            _this.getPage(pdf, pageNumber, container, numPages);
          }
        });
      });
    },

    getPdf() {
      // 此中方式接受流形式返回
      this.$refs.mycanvas.scrollTop = 0;
      //                let accessToken = cache.get('TOKEN').Authorization
      //                let url = `${config.baseUrls}/api/fund/v1/contractReports/previewContractContent?access_token=${accessToken}&id=${contractData.id}&contractUrl=${contractData.contractUrl}&.pdf`
      let url = "http://localhost:8080/static/c.pdf";
      let pdfjsLib = pdf;
      pdfjsLib.PDFJS.workerSrc = "/static/pdf/build/pdf.worker.js";
      let loadingTask = pdfjsLib.getDocument(url);
      loadingTask.promise.then(
        (pdf) => {
          let numPages = pdf.numPages;
          let container = document.getElementById("mycanvas");
          let pageNumber = 1;
          this.pdfPages = numPages;
          this.getPage(pdf, pageNumber, container, numPages);
        },
        function (reason) {
          alert(reason);
        }
      );
    },
  },
  created() {
    var that = this;
    //当前页面监视键盘输入
    document.onkeydown = function (e) {
      //事件对象兼容
      let e1 =
        e || event || window.event || arguments.callee.caller.arguments[0];
      console.log(e1.keyCode);
      //删除
      if (e1 && e1.keyCode == 46) {
        if (that.sel) {
          that.fnDelete();
        }
      }
      // else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
      //   if (that.sel) {
      //     that.copyItem = JSON.parse(JSON.stringify(that.sel));
      //   }
      // } else if (e1 && e1.ctrlKey && e1.keyCode == 86) {
      //   if (that.copyItem) {
      //     that.copyItem.keys = Date.parse(new Date());
      //     that.copyItem.options.active = false;

      //     that.datas.push(that.copyItem);
      //   }
      //   // that.copyItem = null;
      //   // console.log("粘贴");
      // } else if (e1 && e1.keyCode == 40) {
      //   console.log("左箭头");
      // }
    };
  },
};
</script>
<style  >
.el-drawer__wrapper {
  left: auto;
  width: 300px;
}
.l-drawer {
  width: 100% !important;
}

.el-form-item__label {
  width: 100%;
  padding: 0 !important;
}
.el-form-item {
  margin-bottom: 0 !important;
}
.el-select {
  width: 100%;
}

.left-item {
  position: fixed;
  left: 5%;
  top: 6%;
  z-index: 99;
  width: 200px;
  height: 90%;
  box-shadow: 0px 0px 5px -2px crimson;
}
.item-ipt {
  border: 1px solid;
  margin-bottom: 10px;
}

.boxs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.ipt-box {
  position: absolute;
  /* width: 300px;
  height: 50px; */
  line-height: 1;
  border: 1px solid;
  z-index: 99;
  cursor: all-scroll;
}
.canvas-box {
  margin-bottom: 2px;
  position: relative;
  width: 100%;
  height: 100%;
}
.edit-item {
  position: fixed;
  right: 20px;
  top: 0;
  background: red;
  z-index: 1000;
  background: #fff;
  box-shadow: 1px 1px 1px #ccc;
  padding: 100px 20px 20px 20px;
  bottom: 0;
}
.edit-item input {
  display: block;
}
</style>
